iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
Modern Web

網站前端後端與API系列 第 21

NodeJS的動態網站概念-3

  • 分享至 

  • xImage
  •  

哦!我好像看懂了

而且你早就看懂了,後面帶了一個參數,{title:'Express'},意思就是index.ejs被回傳會去後,只要有呼叫title這個參數,就會帶入"Express字串" 這個值。而在ejs模板中,呼叫的方法就是<%= 參數 %>,這也就是為什麼我們開啟網頁會看到Express的字樣,而靜態就只會顯示原始程式碼<%= title %>。

動手做 快樂多 - 加入更多參數試試看

index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { 
   title: 'Express',
   haha: '哈哈',
   ironMan30: '30天鐵人賽',
   theTweenty: '第20天'
  });
});
module.exports = router;

增加了三個參數:
haha: '哈哈',
ironMan30: '30天鐵人賽',
theTweenty: '第20天'
程式碼有換行是為了方便閱讀,不影響執行(要寫在同一行也OK),參數通常用逗號,分隔。

我們也在index.ejs中增加呼叫這些參數的地方,原本檔案中有<%= title %>與Welcome to <%= title %>,我們從Welcom後面開始增加:

   <!-- 修改我們的參數呼叫 -->
    <h1><%= title %></h1>
    <p>Welcome to <%= ironMan30 %><%= theTweenty %></p>
    <h2><%= haha %></h2>

完成後存檔,修改前端的檔案,只要重新整理瀏覽器,修改後端的檔案,大多要重新啟動伺服器。
重新啟動後:
https://ithelp.ithome.com.tw/upload/images/20191006/20113153tw6kgtEpFQ.png

我們完成了後端傳送參數給前端的動作,別小看這部分喔!
想想看,登入會員後看到的頁面,是不是通常都會有專屬您的ID呢?這就是一個應用!這樣的用法無處不在。


上一篇
NodeJS的動態網站概念-2
下一篇
NodeJS的動態網站概念-4
系列文
網站前端後端與API30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言